<script>
import { getShowImage, valIsEmpty } from "@/utils";
import wordInfo from "../wordInfo/index.vue";
import request from "../../../utils/request";

export default {
  name: "explain",
  components: { wordInfo },
  methods: { getShowImage },
  props: {
    wordId: {
      type: String,
      default: "",
    },
  },
  watch: {
    wordId: {
      handler(wordId) {
				this.wordInfo = null
        request({
          url: "thesaurus/getDefinitionByWordId",
          data: {
            wordId,
          },
          errorHandle: true,
          showLoading: true,
        }).then((data) => {
          this.wordInfo = data;
        });
      },
      immediate: true,
    },
  },
  data() {
    return {
      wordInfo: null,
    };
  },
};
</script>

<template>
  <view class="page" v-if="wordInfo">
    <wordInfo :word-info="wordInfo"></wordInfo>
  </view>
</template>

<style scoped lang="scss">
.page {
  height: 100%;
  overflow: auto;
  box-sizing: border-box;

  //.footer-btn {
  //  display: flex;
  //  justify-content: space-around;
  //  margin: 100rpx 0;
	//
  //  > .btn {
  //    height: 100rpx;
  //    width: 250rpx;
  //    display: flex;
  //    align-items: center;
  //    justify-content: center;
  //    border-radius: 50rpx;
  //    color: var(--text-color);
	//
  //    &.plain {
  //      background: var(--theme-color-light);
  //      border: 2rpx solid var(--theme-color);
  //    }
	//
  //    &.primary {
  //      background: var(--theme-color);
  //    }
  //  }
  //}
}
</style>
